<template>
  <!-- 行程上报界面 -->
  <div class="in-uploadTable">
    <el-page-header @back="$router.back()" :content="$route.query.title" />
    <!-- 基本信息 -->
    <div class="baseInfo">
      <el-form :model="dialog_from" label-position="left">
        <el-form-item
          v-for="(item, i) in dialog_info"
          :key="i"
          :label="item.label"
          label-width="80px"
        >
          <template v-if="item.prop === 'cid'">
            <select-community
              :cid.sync="dialog_from[item.prop]"
              :sid.sync="dialog_from.sid"
              :bid.sync="dialog_from.bid"
              :pid.sync="dialog_from.pid"
            ></select-community>
          </template>
          <template v-else-if="item.prop === 'address'">
            <select-address
              :address.sync="dialog_from.address"
              ref="liveAddressRef"
            ></select-address>
          </template>
          <template v-else-if="item.prop === 'start_address'">
            <ul class="ul-address-date">
              <select-address
                :address.sync="dialog_from.start_address"
                ref="start_addressRef"
                class="ul-address-date-item"
              />
              <el-date-picker
                v-model="dialog_from.start_time"
                type="datetime"
                placeholder="选择日期时间"
                class="ul-address-date-item"
                size="small"
                style="width: 100%;"
              ></el-date-picker>
            </ul>
          </template>
          <template v-else-if="item.prop === 'end_address'">
            <ul class="ul-address-date">
              <select-address
                :address.sync="dialog_from.end_address"
                ref="end_addressRef"
                class="ul-address-date-item"
              />
              <el-date-picker
                v-model="dialog_from.end_time"
                type="datetime"
                placeholder="选择日期时间"
                class="ul-address-date-item"
                size="small"
                style="width: 100%;"
              ></el-date-picker>
            </ul>
          </template>
          <template v-else-if="item.prop === 'pass_address'">
            <el-button
              class="el-icon-plus"
              @click="inner_visible = true"
              style="width: 100%;"
            >
              添加途径地
            </el-button>
            <el-tag
              v-for="(tag, i) in pass_address_arr"
              :key="i"
              closable
              type="info"
              @close="tagClose(tag)"
              class="address-tag"
            >
              {{ tag.address }}
            </el-tag>
          </template>
          <template v-else-if="item.prop === 'uid'">
            <el-select
              v-model="dialog_from[item.prop]"
              clearable
              placeholder="请选择"
              size="small"
              style="width: 100%;"
            >
              <el-option
                v-for="user in dialog_user_list"
                :key="user.id"
                :label="user.name + `（${user.account}）`"
                :value="user.id"
              ></el-option>
            </el-select>
          </template>
          <template v-else>
            <el-input v-model="dialog_from[item.prop]"></el-input>
          </template>
        </el-form-item>
      </el-form>
      <div class="div-btn-center">
        <el-button @click="cancelDialog">取 消</el-button>
        <el-button
          type="primary"
          v-if="is_change_travel"
          @click="uploadChangeTravel"
        >
          确定修改
        </el-button>
        <el-button v-else type="primary" @click="addClick">
          确定添加
        </el-button>
      </div>
      <!-- 内层弹窗 -->
      <el-dialog :visible.sync="inner_visible" :append-to-body="true" center>
        <el-form label-position="left" label-width="80px">
          <el-form-item label="时间">
            <el-date-picker
              v-model="temppass_address.time"
              type="datetime"
              placeholder="选择日期时间"
              class="ul-address-date-item"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="地址">
            <select-address
              :initAddress="temppass_address.address"
              :address.sync="temppass_address.address"
              ref="pass_addressRef"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="inner_visible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="addpassAddress"
            class="el-icon-upload el-icon--right"
          >
            确 定
          </el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rules: {},
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            },
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            },
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            },
          },
        ],
      },
      is_change_travel: false, // 是否修改
      inner_visible: false, // 内层弹窗
      dialog_from: {
        uid: '',
        cid: '',
        pid: '',
        bid: '',
        sid: '',
        address: '',
        start_address: '',
        end_address: '',
        pass_address: [],
      },
      dialog_info: {
        cid: { label: '社区', prop: 'cid' },
        uid: { label: '居民编号', prop: 'uid' },
        address: { label: '住址', prop: 'address' },
        start_address: { label: '起点', prop: 'start_address' },
        end_address: { label: '终点', prop: 'end_address' },
        pass_address: { label: '途径', prop: 'pass_address' },
      },
      dialog_user_list: [], // 根据社区返回用户列表
      pass_address_arr: [], // 存储途径地
      // 单个途径地对象
      temppass_address: {
        id: '',
        time: '',
        address: '',
      },
    }
  },
  methods: {
    /* DOM 操作 */
    // 搜索
    search() {
      console.debug(this.travel_from)
      const data = this.travelFrm
    },
    // 添加途径地
    addpassAddress() {
      this.temppass_address.id = this.pass_address_arr.length
      this.pass_address_arr.push(this.temppass_address)
      this.inner_visible = false
    },
    // 删除途径地
    tagClose(tag) {
      // console.debug('tag', tag)
      this.pass_address_arr.some((item, index) => {
        if (tag.id === item.id) {
          this.pass_address_arr.splice(index, 1)
          return true
        }
      })
    },
    // 点击 确定 最外层弹窗
    addClick() {
      this.dialog_from.pass_address = JSON.stringify(this.pass_address_arr)
      this.travel_dialog_visible = false
      this.$message({
        message: '添加成功',
        type: 'success',
      })
    },
    // 点击 取消 最外弹窗
    cancelDialog() {
      this.travel_dialog_visible = false
      this.pass_address_arr = [] // 清空途径数组
    },
  },
  created() {},
}
</script>

<style lang="less" scoped>
.in-uploadTable {
  background-color: white;
  padding-bottom: 170px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  // 头标
  .el-page-header {
    margin-bottom: 20px;
    padding-top: 10px;
    padding-left: 10px;
    line-height: 28px;
    /deep/.el-page-header__left:hover {
      color: @color-blue;
    }
    /deep/.el-page-header__content {
      font-size: 1rem !important;
      color: #666;
      font-weight: 800;
      line-height: 26px;
    }
  }
  // 表格内容
  .baseInfo {
    margin: 0 auto;
    // background-color: pink;
    width: 550px;
    .el-form-item__label {
      font-size: 15px;
    }
  }
  // 提交按钮
  .el-icon-upload {
    display: block;
    margin: 0 auto;
    margin-top: 35px;
  }
}
.div-btn-center {
  display: flex;
  button {
    flex: 1;
  }
}
</style>
